<template>
  <view v-if="!destroyOnHide || transitionShow" v-show="destroyOnHide ? true : transitionShow" :style="{'--duration': duration+'ms'}" :class="transitionClass">
    <slot />
  </view>
</template>

<script setup>
	import { ref, watch, computed} from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	
	const transitionShow = ref(false)
	let timer = null
	const transitionClass = ref('')
	
	watch(() => props.show, (newValue, oldValue) => {
		if(oldValue !== undefined || newValue) handleTransition(newValue)
	},{immediate: true})
	
	async function handleTransition(ifShow){
		if (ifShow) {
			transitionShow.value = ifShow
			transitionClass.value = 'xl-' + props.enterMode + '-enter'
			await uni.$xl.sleep(30)
			transitionClass.value = 'xl-' + props.enterMode + '-enter-active xl-' + props.enterMode +'-enter-to'
		} else {
			transitionClass.value = 'xl-' + props.leaveMode + '-leave'
			await uni.$xl.sleep(30)
			transitionClass.value = 'xl-' + props.leaveMode + '-leave-active xl-' + props.leaveMode +'-leave-to'
		}
		
		// 清除之前的动画结束函数
		if (timer) clearTimeout(timer)
		
		timer = setTimeout(() => {
			// 等待动画完成
			transitionShow.value = ifShow
			timer = null
		}, props.duration)
	}
</script>

<style lang="scss" scoped>
	$xl-zoom-scale: scale(0.9);
	
	.xl-fade-enter-active,
	.xl-fade-leave-active {
		transition-property: opacity;
		transition-duration: var(--duration);
	}
	.xl-fade-leave,
	.xl-fade-enter-to {
		opacity: 1;
	}
	.xl-fade-enter,
	.xl-fade-leave-to {
		opacity: 0;
	}
	
	.xl-fade-zoom-enter-active,
	.xl-fade-zoom-leave-active {
		transition-property: transform, opacity;
		transition-duration: var(--duration);
	}
	.xl-fade-zoom-enter,
	.xl-fade-zoom-leave-to {
		transform: $xl-zoom-scale;
		opacity: 0;
	}
	.xl-fade-zoom-leave,
	.xl-fade-zoom-enter-to {
		transform: scale(1);
		opacity: 1;
	}
	
	.xl-fade-down-enter-active,
	.xl-fade-down-leave-active,
	.xl-fade-left-enter-active,
	.xl-fade-left-leave-active,
	.xl-fade-right-enter-active,
	.xl-fade-right-leave-active,
	.xl-fade-up-enter-active,
	.xl-fade-up-leave-active {
		transition-property: opacity, transform;
		transition-duration: var(--duration);
	}
	
	.xl-fade-up-enter,
	.xl-fade-up-leave-to {
		transform: translateY(100%);
		opacity: 0;
	}
	.xl-fade-up-leave,
	.xl-fade-up-enter-to {
		transform: translateY(0);
		opacity: 1;
	}
	
	.xl-fade-down-enter,
	.xl-fade-down-leave-to {
		transform: translateY(-100%);
		opacity: 0;
	}
	.xl-fade-down-leave,
	.xl-fade-down-enter-to {
		transform: translateY(0);
		opacity: 1;
	}
	
	.xl-fade-left-enter,
	.xl-fade-left-leave-to {
		transform: translateX(-100%);
		opacity: 0;
	}
	.xl-fade-left-leave,
	.xl-fade-left-enter-to {
		transform: translateX(0);
		opacity: 1;
	}
	
	.xl-fade-right-enter,
	.xl-fade-right-leave-to {
		transform: translateX(100%);
		opacity: 0;
	}
	.xl-fade-right-leave,
	.xl-fade-right-enter-to {
		transform: translateX(0);
		opacity: 1;
	}
	
	.xl-slide-down-enter-active,
	.xl-slide-down-leave-active,
	.xl-slide-left-enter-active,
	.xl-slide-left-leave-active,
	.xl-slide-right-enter-active,
	.xl-slide-right-leave-active,
	.xl-slide-up-enter-active,
	.xl-slide-up-leave-active {
		transition-property: transform;
		transition-duration: var(--duration);
	}
	
	.xl-slide-up-enter,
	.xl-slide-up-leave-to {
		transform: translateY(100%);
	}
	.xl-slide-up-leave,
	.xl-slide-up-enter-to {
		transform: translateY(0);
	}
	
	.xl-slide-down-enter,
	.xl-slide-down-leave-to {
		transform: translateY(-100%);
	}
	.xl-slide-down-leave,
	.xl-slide-down-enter-to {
		transform: translateY(0);
	}
	
	.xl-slide-left-enter,
	.xl-slide-left-leave-to {
		transform: translateX(-100%);
	}
	.xl-slide-left-leave,
	.xl-slide-left-enter-to {
		transform: translateX(0);
	}
	
	.xl-slide-right-enter,
	.xl-slide-right-leave-to {
		transform: translateX(100%);
	}
	.xl-slide-right-leave,
	.xl-slide-right-enter-to {
		transform: translateX(0);
	}
	
	.xl-zoom-enter-active,
	.xl-zoom-leave-active {
		transition-property: transform;
		transition-duration: var(--duration);
	}
	
	.xl-zoom-enter,
	.xl-zoom-leave-to {
		transform: $xl-zoom-scale
	}
	.xl-zoom-leave,
	.xl-zoom-enter-to {
		transform: scale(1);
	}
	
</style>